<template>
	<view class="content">
		<view class="inner-box">
			<view class="cu-form-group">
				<view class="title">合同编号</view>
				<input v-model="form.code" placeholder="请输入合同编号" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">合同名称</view>
				<input v-model="form.name" placeholder="请输入合同名称" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">合同类型</view>
				<picker @change="contractPickerType" :value="typeSelect" range-key="dictLabel" :range="contractType">
					<view class="picker">
						{{contractType[typeSelect]?contractType[typeSelect].dictLabel:'请选择合同类型'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group between" >
				<view class="title">客户名称</view>
				<view class="right-box" @click="choseCustom">
					<text class="name">{{customerUser.customerName}}</text>
					<image class="img" src="../../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">合同金额</view>
				<input v-model="form.money" placeholder="请输入合同金额" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">下单时间</view>
				<picker mode="date" :value="form.orderDate" start="2020-01-01" end="2060-12-31" @change="orderDateChange">
					<view class="picker">
						{{form.orderDate}}
					</view>
				</picker>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">利润</view>
				<input placeholder="请输入利润" name="input"></input>
			</view> -->
			<view class="cu-form-group">
				<view class="title">合同开始时间</view>
				<picker mode="date" :value="form.startTime" start="2020-01-01" end="2060-12-31" @change="startDateChange">
					<view class="picker">
						{{form.startTime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">合同结束时间</view>
				<picker mode="date" :value="form.limitTime" start="2020-01-01" end="2060-12-31" @change="endDateChange">
					<view class="picker">
						{{form.limitTime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group between">
				<view class="title">客户签约人</view>
				<picker @change="contactPickerType" :value="contactSelect" range-key="name"  :range="contacts">
					<view class="picker">
						{{contactSelect>-1?contacts[contactSelect].name:'请选择签约人'}}
					</view>
				</picker>
			<!-- 	<view class="right-box" @click="choseCustom">
					<text class="name">张三</text>
					<image class="img" src="../../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view> -->
			</view>
			<!-- <view class="cu-form-group between">
				<view class="title">公司签约人</view>
				<view class="right-box" @click="choseCustom">
					<text class="name">张三</text>
					<image class="img" src="../../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view>
			</view> -->
			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" @input="textareaBInput" placeholder="请输入备注"></textarea>
			</view>
			<!-- 产品信息 -->
			<view class="prod-info">
				<view class="title">产品信息</view>
				<view class="prod-list">
					<!-- 没有产品 -->
					<view class="no-prod" v-if="prodList.length==0">
						<image class="img" src="../../../static/images/seize.png" mode="aspectFill"></image>
						<text class="text">请选择产品</text>
					</view>
					<!-- 产品列表 -->
					<view class="item-box" v-if="form.products.length>0">
						<view class="item" v-for="(item,index) in form.products" :key="index">
							<view class="name-box">
								<text class="name">{{ item.name }}</text>
								<text class="price">{{ item.subtotal }}元</text>
							</view>
							<view class="input-box">
								<view class="left">
									<text class="symbol">￥</text>
									<input @input.native="salesPriceInput($event,index)"    type="number" v-model="item.salesPrice"  />
								</view>
								<view class="num-box">
									<view class="btn sub" @click.native="numberSubtractInput($event,index)" >-</view>
									<input type="number" v-model="item.num" />
									<view class="btn add" @click.native="numberAddInput($event,index)">+</view>
								</view>
								<view class="right">
									<input type="number" @input.native="discountInput($event,index)"  v-model="item.discount" />%
								</view>
							</view>
						</view>
						<!-- 合计 -->
						<view class="total-box">
							<view class="left">
								产品：<text class="num">{{form.products.length}}</text> 总金额：<text class="num">{{form.money}}</text>
							</view>
							<!-- <view class="right">
								整单折扣 <input type="number" value="" /> %
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="btn add-prod" @click="choseProd">添加产品</view>
			<view class="btn submit" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				customerUser:{},
				contacts:[],
				contactSelect: -1, // 当前选中的记录类型
				contractType:[],
				typeSelect:-1,
				form:{
					name:undefined,
					code:undefined,
					customerUserId:undefined,
					customerId:undefined,
					orderDate:undefined,
					products:[],
					startTime:undefined,
					limitTime:undefined,
					money:undefined,
					totalPrice:undefined,
					types:undefined,
					contactsId:undefined,
				}
			}
		},
		onLoad() {			
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			var dicts = uni.getStorageSync('dicts');
			dicts=JSON.parse(dicts);
			this.contractType=dicts['contractType'];
			let date = new Date();
			this.form.orderDate=this.utils.dateFormat("YYYY-mm-dd", date);
			this.form.startTime=this.utils.dateFormat("YYYY-mm-dd", date);
			this.form.limitTime=this.utils.dateFormat("YYYY-mm-dd", date);
			
		},
		onShow(){
			var that = this;
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			let res = currPage.data.userdata;
			
			if(res!=undefined&&res.item!=undefined){
				if(res.type=="customer"){
					this.customerUser=res.item;
					this.form.customerId=this.customerUser.customerId;
					this.form.customerUserId=this.customerUser.customerUserId;
					this.getCustomerContactsList();
				}
				else if(res.type=="product"){
					
					this.form.products=[];
					for(var i=0;i<res.item.length;i++){
						var data={
							productId:res.item[i].productId,
							name:res.item[i].name,
							price:res.item[i].price,
							salesPrice:res.item[i].price,
							num:1,
							discount:0,
							subtotal:res.item[i].price,
							unit:res.item[i].unit,
							
						}
						this.form.products.push(data);
					}
					this.getTotalMoney();
				}
				
				
				
			}
			
		},
		methods: {
			getCustomerContactsList(){
				var data = {customerId:this.form.customerId};
				var that=this;
				api.getCustomerContactsList(data).then(
					res => {
						if(res.code==200){
							 that.contacts=res.data;
							 console.log(that.contacts)
							 if(that.contacts!=null&&that.contacts.length>0){
								 that.contactSelect=0;
							 }
							 else{
								 that.contactSelect=-1;
							 }
							 that.$forceUpdate()
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							 
						}
					},
					rej => {}
				);
			},
			contactPickerType(e) {
				console.log(e.detail.value)
				this.contactSelect = e.detail.value
				
				 
			},
			contractPickerType(e) {
				this.typeSelect = e.detail.value
				
			},
			orderDateChange(e) {
				this.form.orderDate = e.detail.value
			},
			startDateChange(e) {
				this.form.startTime = e.detail.value
			},
			endDateChange(e) {
				this.form.limitTime = e.detail.value
			},
			textareaBInput(e) {
				this.form.remark = e.detail.value
			},
			getTotalMoney(){
				this.form.money=0.00;
				var that=this;
				this.form.products.forEach(function(element) {
					that.form.money+=element.subtotal;
				});
			},
			salesPriceInput(e,index){
				
				this.form.products[index].subtotal=this.form.products[index].num*this.form.products[index].salesPrice-this.form.products[index].salesPrice*this.form.products[index].num*this.form.products[index].discount/100;
				console.log(this.form.products[index].subtotal);
				this.getTotalMoney();
				
			},
			numberSubtractInput(e,index){
				console.log(index);
				if(this.form.products[index].num<=1){
					this.form.products[index].num=1;
				}
				else{
					this.form.products[index].num-=1;
				}
				this.form.products[index].subtotal=this.form.products[index].num*this.form.products[index].salesPrice-this.form.products[index].salesPrice*this.form.products[index].num*this.form.products[index].discount/100;
				this.getTotalMoney();
			},
			numberAddInput(e,index){
				console.log(index);
				this.form.products[index].num+=1;
				this.form.products[index].subtotal=this.form.products[index].num*this.form.products[index].salesPrice-this.form.products[index].salesPrice*this.form.products[index].num*this.form.products[index].discount/100;
				this.getTotalMoney();
			},
			discountInput(e,index){
				this.form.products[index].subtotal=this.form.products[index].num*this.form.products[index].salesPrice-this.form.products[index].salesPrice*this.form.products[index].num*this.form.products[index].discount/100;
				console.log(this.form.products[index].subtotal);
				this.getTotalMoney();
			},
			// 选择客户名称
			choseCustom(){
				uni.navigateTo({
					url: './choseCustm'
				})
			},
			// 选择产品
			choseProd(){
				uni.navigateTo({
					url: './choseProd'
				})
			},
			submit(){
				
				if (this.utils.isEmpty(this.form.code)) {
					uni.showToast({
						title: "请输入合同编号",
						icon: 'none',
					});
					return
				}
				if (this.utils.isEmpty(this.form.name)) {
					uni.showToast({
						title: "请输入合同名称",
						icon: 'none',
					});
					return
				}
				if (this.typeSelect==-1) {
					uni.showToast({
						title: "请选择合同类型",
						icon: 'none',
					});
					return
				}
				
				if (this.utils.isEmpty(this.form.customerUserId)) {
					uni.showToast({
						title: "请选择客户",
						icon: 'none',
					});
					return
				}
				if (this.contactSelect==-1) {
					uni.showToast({
						title: "请选择客户签约人",
						icon: 'none',
					});
					return
				}
				if (this.utils.isEmpty(this.form.money)) {
				 	uni.showToast({
				 		title: "请输入合同金额",
				 		icon: 'none',
				 	});
				 	return
				 }
				 if (this.utils.isEmpty(this.form.orderDate)) {
				  	uni.showToast({
				  		title: "请选择下单时间",
				  		icon: 'none',
				  	});
				  	return
				  }
				 if (this.utils.isEmpty(this.form.startTime)) {
				  	uni.showToast({
				  		title: "请选择开始时间",
				  		icon: 'none',
				  	});
				  	return
				  }
				  
				  if (this.utils.isEmpty(this.form.limitTime)) {
				   	uni.showToast({
				   		title: "请选择结束时间",
				   		icon: 'none',
				   	});
				   	return
				   }
				 
				this.form.types=this.contractType[this.typeSelect].dictValue;
				this.form.contactsId=this.contacts[this.contactSelect].contactsId;
				this.form.totalPrice=this.form.money;
				api.addContract(this.form).then(
					res => {
						if(res.code==200){
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack({
								  success: () => {
								  }
								})
							}, 500);
						}
						else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					},
					rej => {}
				);
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 20upx;
		.inner-box{
			height: calc(100% - 140upx);
			background: #fff;
			overflow: auto;
			.cu-form-group.between{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right-box{
					display: flex;
					align-items: center;
					.name{
						font-size: 32upx;
						color: #555;
						margin-right: 20upx;
					}
					.img{
						width: 20upx;
						height: 20upx;
						margin-left: 20upx;
					}
				}
			}
			.prod-info{
				.title{
					height: 80upx;
					line-height: 80upx;
					padding: 0 30upx;
					font-size: 32upx;
					color: #666;
					background: #EAEEF0;
				}
				.prod-list{
					background: #fff;
					.no-prod{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 80upx 0;
						.img{
							width: 200upx;
							height: 200upx;
							margin-bottom: 30upx;
						}
						.text{
							font-size: 24upx;
							color: #999;
						}
					}
					.item-box{
						padding: 0 30upx;
						.item{
							padding: 30upx 0 20upx;
							border-bottom: 1px solid #f7f7f7;
							.name-box{
								display: flex;
								align-items: center;
								justify-content: space-between;
								.name{
									font-size: 32upx;
									color: #333;
								}
								.price{
									font-size: 32upx;
									color: #E6A23C;
								}
							}
							.input-box{
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 20upx;
								.left{
									height: 60upx;
									line-height: 60upx;
									padding: 0 20upx;
									border: 1px solid #d6d6d6;
									border-radius: 2px;
									display: flex;
									align-items: center;
									justify-content: center;
									.symbol{
										font-size: 32upx;
										color: #3B80F7;
										margin-right: 10upx;
									}
									input{
										width: 100upx;
									}
								}
								.num-box{
									height: 60upx;
									line-height: 60upx;
									display: flex;
									align-items: center;
									justify-content: space-between;
									border: 1px solid #d6d6d6;
									border-radius: 2px;
									input{
										width: 100upx;
										text-align: center;
									}
									.btn{
										width: 50upx;
										text-align: center;
										font-size: 32upx;
										color: #3B80F7;
										&.sub{
											border-right: 1px solid #d6d6d6;
										}
										&.add{
											border-left: 1px solid #d6d6d6;
										}
									}
								}
								.right{
									display: flex;
									align-items: center;
									font-size: 24upx;
									color: #333;
									input{
										width: 120upx;
										height: 60upx;
										padding: 0 20upx;
										border: 1px solid #d6d6d6;
										border-radius: 2px;
										margin-right: 10upx;
										text-align: center;
									}
								}
							}
						}
						
						.total-box{
							padding: 30upx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.left{
								display: flex;
								align-items: center;
								font-size: 28upx;
								color: #333;
								.num{
									color: #E6A23C;
								}
							}
							.right{
								display: flex;
								align-items: center;
								font-size: 24upx;
								color: #666;
								input{
									width: 120upx;
									height: 60upx;
									line-height: 60upx;
									text-align: center;
									padding: 0 20upx;
									border: 1px solid #d6d6d6;
									border-radius: 2px;
									margin-left: 20upx;
									margin-right: 10upx;
								}
							}
						}
					}
				}
			}
		}
		.footer-box{
			padding: 20upx 24upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				width: 45%;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				font-size: 28upx;
				border-radius: 8upx;
				&.add-prod{
					border: 1px solid #39b54a;
					background: #fff;
					color: #39b54a;
				}
				&.submit{
					background: #39b54a;
					color: #fff;
				}
			}
		}
	}
</style>
